<template>
  <div id="app">
    <p>{{ msg }}</p>
    <!-- 研究实例的生命周期的意义, 实例的出生和消亡, 实例哪些特定事件做了什么事情
           生命周期函数(钩子函数)
       -->
    <button @click="msg = 123">change</button>
    <button @click="remove">销毁</button>
  </div>
</template>

<script>
// 每一个vue实例都默认执行了几个钩子函数
export default {
  data() {
    return {
      msg: '100'
    }
  },
  methods: {
    remove() {
      this.$destroy()
    }
  },
  // data methods filters components watch computed props
  // ============创建阶段=====================
  beforeCreate() {
    // 创建前 实例组件创建完毕,数据没有初始化完毕, 访问不到data中的数据的
    // console.log(this.msg)
  },
  created() {
    //创建后 数据初始化完毕,最早在这个钩子函数中才可以访问到数据
    // console.log(this.msg)
   this.timerId= setInterval(()=>{
        console.log(123);
    },1000)
  },
  // =========== 挂载阶段 =====================
  beforeMount() {
    // 模板编译完毕之后,dom并没有挂载到组件
    // console.log(document.querySelector('p'))//null
  },
  mounted() {
    // 模板编译结束之后挂载到了页面中的 在页面看到数据渲染出来,其实钩子函数已经执行到了第四个钩子了
    //   console.log(document.querySelector('#app'))
  },
  // ====== 更新阶段 ================
  beforeUpdate() {
    // 更新前 这个钩子中DOM节点并没有变化, 数据已经是更新了
    // console.log(document.querySelector('#app').innerText)
    console.log(this.msg)
  },
  updated() {
    // 更新后 这个钩子函数执行完之后DOM节点更新完毕
    // console.log(document.querySelector('#app').innerText)
  },
  //   ===== 销毁阶段============
  beforeDestroy() { // 销毁前 实例方法 属性 都可以访问
    console.log(this.msg)
    clearInterval(this.timerId)
    console.log(document.querySelector('#app').innerText)
    console.log('销毁之前')
  },
  destroyed() { // 销毁后 实例就不存在
    console.log('销毁后')
  }
}
</script>

<style></style>
